<template>
  <div class="app-container home">
    <!-- <el-row v-for="(item) in routeDatas" :key="item.routeId" >
      <el-col>
        <CarStationLine :routeData="item" />
      </el-col>
    </el-row> -->
    <el-row>
      <div class="tableBox">
        <h2>demo</h2>
        <BasicTable :column="column" :handel="handel" :tableData="tableData" :isSelect="true" @select="ChangeSelect"
          @rowClick="rowClick" isRowRight key="" :rightMenu="rightMenu">
        </BasicTable>
      </div>
    </el-row>
    <el-divider />
    <el-table height="200px" ref="singleTableRef" :data="tableData2" highlight-current-row style="width: 100%"
      @current-change="handleCurrentChange">
      <el-table-column type="index" width="50" />
      <el-table-column property="date" label="Date" width="120" />
      <el-table-column property="name" label="Name" width="120" />
      <el-table-column property="address" label="Address" />
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData2[5])">Select second row</el-button>
      <el-button @click="setCurrent()">Clear selection</el-button>
    </div>
  </div>
</template>

<script setup>
import BasicTable from '@/components/BasicTable/BasicTable.vue'
// import CarStationLine from '@/components/CarStationLine/CarStationLine.vue'
import { toNumber } from 'lodash';
// import { res } from '@/mock/routeMock.js'
// // console.log(res);
// const routeDatas = ref([])
// const initData = ()=>{
//   res.forEach(item => {
//     let upRoute = []
//     let downRoute = []
//     const { stationList } = item
//     stationList.forEach(ele => {
//       if(ele.direction == 1){
//         upRoute.push(ele)
//       }else{
//         downRoute.push(ele)
//       }
//     });
//     routeDatas.value.push({
//       ...item,
//       upRoute,
//       downRoute
//     })
//   });
// }
// initData()
const ChangeSelect = (val) => {
  console.log(val, '当前选中的数据');
}
const rowClick = (row) => {
  console.log(row, '点击的当前行的数据');
}
// 列配置
const column = ref([
  {
    prop: 'job',
    label: '工作',
    fixed: true,
  },
  {
    prop: 'age',
    label: '年龄',
    isTag: true,
    tagEnumColor: (item) => {
      if ((item) <= 18) return '#e81123'
      return '#10893e'
    }
  },
  {
    prop: 'gender',
    label: '性别'
  }
])
// 右键菜单
const rightMenu = ref([
  {
    content: '查看车辆',
    methods: (e) => {
      console.log(e, '查看车辆');
    },
  },
  {
    content: '修改车辆状态',
    children: [
      {
        content: '在线',
        methods: (e) => {
          console.log(e, '设置在线状态');
        },
      },
      {
        content: '修改离线状态',
        methods: (e) => {
          console.log(e, '设置离线状态');
        },
      }
    ]
  }
])
// 操作
const handel = ref({
  fixed: 'right',
  width: 120,
  label: '操作',
  option: [
    {
      icon: 'icon-gy_shijianbanli2',
      contents: '修改',
      method: (e) => {
        alert('点击了修改', e)
      },
      disabled: (e) => {
        // console.log(e);
        return false
      }
    },
    {
      icon: 'icon-shanchu',
      contents: '删除',
      method: (e) => {
        alert('点击了删除', e)
      },
    }
  ]
})
// 表格数据
const tableData = ref([
  {
    job: '律师',
    age: '32',
    gender: '男',
    id: '2323232323'
  },
  {
    job: '医生',
    age: '45',
    gender: '男'
  },
  {
    job: '教师',
    age: '52',
    gender: '男'
  },
  {
    job: '学生',
    age: '16',
    gender: '女'
  },
  {
    job: '环卫工人',
    age: '57',
    gender: '男'
  }
])

const version = ref('4.7.0')

function goTarget(url) {
  window.open(url, '__blank')
}

const currentRow = ref()
const singleTableRef = ref()

const setCurrent = (row) => {
  singleTableRef.value.setCurrentRow(row)
}
const handleCurrentChange = (val) => {
  currentRow.value = val
}
const tableData2= ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>

<style scoped lang="scss">
.tableBox {
  margin-top: 40px;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

:deep(text) {
  transform: rotate(90deg)
}
</style>

